import {Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver} from '@angular/core';
import {Dynamic2Component} from '../dynamic2/dynamic2.component';
import {Dynamic3Component} from '../dynamic3/dynamic3.component';


@Component({
  selector: 'app-dynamic',
  templateUrl: './dynamic.component.html',
  styleUrls: ['./dynamic.component.css'],
  // directives: [Dynamic2Component, Dynamic3Component]
})
export class DynamicComponent implements OnInit {


  ngOnInit() {
  }

  isShow: boolean = false;
  isDynamic1: boolean = true;

  dyToggle() {
    this.isShow = !this.isShow;
  }

@ViewChild('dyroom', {read: ViewContainerRef})
  dyViewContainer: ViewContainerRef;

  constructor(private cfr: ComponentFactoryResolver) {
  }


  componentToggle() {
    this.isDynamic1 = !this.isDynamic1;
    let aComponentClass = this.isDynamic1 ? Dynamic2Component : Dynamic3Component;
    let aComponent = this.cfr.resolveComponentFactory(aComponentClass);
    this.dyViewContainer.createComponent(aComponent);
  }

}
